<template>
  <div class="abnormal">
    <!-- 顶部选者 -->
    <header-select @update="update" @excutorName="excutorName" @ceratTime="ceratTime" v-if="type === 'pie-chart'" />
    <!-- 饼图 -->
    <div class="abnormal-piechart task-mb10" v-if="type === 'pie-chart'">
      <h3>{{ $t('report.statistics.title34')}}</h3>

      <div class="abnormal-tab task-flex task-ai category-btn-group">
        <button type="button" v-for="(item, index) in taskExceptionNodeList" :key="index" @click="TabExceptionSwitch(item.englishName)" :class="{'active': checkExceptionTab === item.englishName}">{{item.exceptionName}}</button>
      </div>

      <div id="piechart" ref="piechart" v-show="PieChartList.length"></div>
      <no-data-view v-show="!PieChartList.length" :notice-msg="$t('common.base.tip.noData')"></no-data-view>
      <div class="abnormal-ant" v-show="pieTabList.length">
        <base-button
          type="primary"
          native-type="submit"
          @event="chartTotal"
          v-if="isButtonDisplayed && exportAuth"
        >{{ $t('common.base.export') }}</base-button>
        <base-button
          v-if="isButtonDisplayed && exportAuth"
          type="primary"
          native-type="submit"
          class="task-ml4"
          @event="chartTotal('all')"
        >{{ $t('common.base.exportAll') }}</base-button>  
        <base-button
          type="primary"
          native-type="submit"
          class="task-ml4"
          @event="pieTabList = []"
        >{{ $t('common.base.collapse') }}</base-button>               
            
      </div>
      <!-- table -->
      <div class="task-mt12" v-show="pieTabList.length">
        <el-table
          stripe
          border
          :data="pieTabList"
          ref="multipleTable"
          header-row-class-name="common-list-table-header taks-list-table-header"
        >
          <el-table-column
            v-for="(item, index) in tableNames"
            :key="index"
            :label="item.displayName"
          >
            <template slot-scope="scope">
              <template v-if="Array.isArray(scope.row[item.fieldName])">
                {{scope.row[item.fieldName].join('、')}}
              </template>
              <template v-else-if="item.fieldName === 'taskNo'">
                <a
                  href=""
                  class="view-detail-btn task-list-numbering"
                  @click.stop.prevent="
                    openTaskTab(scope.row.taskId, scope.row[item.fieldName])
                  "
                >{{scope.row[item.fieldName]}}</a>
              </template>
              
              <template v-else-if="item.fieldName === 'excutorName'">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.executorStaffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.excutorName }}
                </template>
              </template>

              <template v-else-if="item.fieldName === 'createName'">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.createUserStaffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.createName }}
                </template>
              </template>

              <template v-else-if="item.fieldName === 'action'">
                {{abText([scope.row[item.fieldName]])}}
              </template>
              <template v-else-if="item.fieldName === 'createTime'">{{scope.row.timeName}}</template>
              <template v-else>{{scope.row[item.fieldName]}}</template>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="spare-parts-foot task-flex task-ai task-mt12">
          <div class="task-span1"></div>

          <el-pagination
            class="comment-list-table-footer-pagination"
            background
            :page-sizes="defaultTableData.defaultPageSizes"
            :page-size="PiePageParams.pageSize"
            :total="Pietotal"
            :current-page="PiePageParams.page"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
            layout="prev, pager, next, sizes, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </div>


    <header-select @update="update" @excutorName="excutorName" @ceratTime="ceratTime" columnar="columnar" v-if="type === 'histogram'" />
    <!-- 柱状图 -->
    <div class="abnormal-piechart" v-if="type === 'histogram'">
      <h3>{{ $t('report.statistics.title35') }}</h3>
      <div class="abnormal-tab task-flex task-ai category-btn-group">
        <button type="button" v-for="(item, index) in taskCustomExceptionNodeList" :key="index" @click="TabSwitch(item.englishName)" :class="{'active': checkTab === item.englishName}">{{item.exceptionName}}</button>
      </div>
      <div id="columnar" ref="columnar" v-if="ColumnarList.length"></div>
      <no-data-view v-show="!ColumnarList.length" :notice-msg="$t('common.base.tip.noData')"></no-data-view>
      <div class="abnormal-ant" v-show="columnarTabList.length">
        <base-button
          type="primary"
          native-type="submit"
          @event="histogramTotal"
          v-if="isButtonDisplayed && exportAuth"
        >{{ $t('common.base.export') }}</base-button>
        <base-button
          v-if="isButtonDisplayed && exportAuth"
          type="primary"
          native-type="submit"
          class="task-ml4"
          @event="histogramTotal('all')"
        >{{ $t('common.base.exportAll') }}</base-button>  
        <base-button
          type="primary"
          native-type="submit"
          class="task-ml4"
          @event="columnarTabList = []"
        >{{ $t('common.base.collapse') }}</base-button>               
            
      </div>
      <!-- table -->
      <div class="task-mt12" v-show="columnarTabList.length">
        <el-table
          stripe
          border
          :data="columnarTabList"
          ref="multipleTable"
          header-row-class-name="common-list-table-header taks-list-table-header"
        >
          <el-table-column
            v-for="(item, index) in tableNames"
            :key="index"
            :label="item.displayName"
          >
            <template slot-scope="scope">
              <template v-if="Array.isArray(scope.row[item.fieldName])">
                {{scope.row[item.fieldName].join('、')}}
              </template>

              <template v-else-if="item.fieldName === 'taskNo'">
                <a
                  href=""
                  class="view-detail-btn task-list-numbering"
                  @click.stop.prevent="
                    openTaskTab(scope.row.taskId, scope.row[item.fieldName])
                  "
                >{{scope.row[item.fieldName]}}</a>
              </template>
              
              <template v-else-if="item.fieldName === 'excutorName'">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.executorStaffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.excutorName }}
                </template>
              </template>

              <template v-else-if="item.fieldName === 'createName'">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.createUserStaffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.createName }}
                </template>
              </template>

              <template v-else-if="item.fieldName === 'action'">
                {{abText(scope.row.actionNameList)}}
              </template>
              <template v-else-if="item.fieldName === 'createTime'">{{scope.row.timeName}}</template>
              <template v-else>{{scope.row[item.fieldName]}}</template>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="spare-parts-foot task-flex task-ai task-mt12">
          <div class="task-span1"></div>

          <el-pagination
            class="comment-list-table-footer-pagination"
            background
            :page-sizes="defaultTableData.defaultPageSizes"
            :page-size="curPageParams.pageSize"
            :total="curtotal"
            :current-page="curPageParams.page"
            @current-change="CurhandlePageChange"
            @size-change="CurhandleSizeChange"
            layout="prev, pager, next, sizes, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Abnormal from './abnormal';
export default Abnormal;
</script>
<style lang="scss" scoped>
.abnormal{
  padding: 10px;
  &-piechart {
    background-color:#fff;
    padding: 20px 30px;
    border-radius: 4px;
    margin-top: 10px;
    padding-bottom: 30px;
  }
  &-tab {
    justify-content: center;
    cursor: pointer;
    .active {
      background-color: $color-primary-light-6;
      color: #fff;
      border: 1px solid $color-primary-light-6;
    }
  }
  .abnormal-ant {
    display: flex;
    justify-content: flex-end;
  }
  .abnormal-tab {
    position: relative;
    z-index: 100;
  }
}


#piechart, #columnar {
  width: 100%;
  height: 400px;
  margin-top: 100px;
}
h3 {
  font-weight: normal;
}
.app-nodata-view {
  position: relative;
  top: -40px;
}
.category-btn-group{
  button{
    outline: none;
    border: 1px solid #ddd;
    border-left: none;
    background-color: #f4f4f4;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    transition: all ease .15s;
    border-radius: 0;
  }

  button:first-child{
    border-radius:  2px 0 0 2px ;
    border-left: 1px solid #ddd;
  }

  button:last-child{
    border-radius: 0 2px 2px 0;
  }
}
a {
  color: $color-primary;
}
</style>